<div class="page-head">
    <h2>Register</h2>
    <ol class="breadcrumb">
        <li><?= anchor('home/index', 'Home'); ?></li>
        <li class="active">Register</li>
    </ol>
</div>

<div class="cl-mcont">
    <div class="row wizard-row">
        <div class="col-md-12 fuelux">
            <div class="block-wizard">
                <div id="wizard1" class="wizard wizard-ux">
                    <ul class="steps">
                        <li data-target="#step1" class="active">Step 1<span class="chevron"></span></li>
                        <li data-target="#step3">Step 2<span class="chevron"></span></li>
                        <li data-target="#step2">Step 3<span class="chevron"></span></li>
                    </ul>
                    <div class="actions">
                        <button type="button" class="btn btn-xs btn-prev btn-default"> <i class="icon-arrow-left"></i>Prev</button>
                        <button type="button" class="btn btn-xs btn-next btn-default" data-last="Finish">Next<i class="icon-arrow-right"></i></button>
                    </div>
                </div>
                <div class="step-content">
                    <?= form_open('home/do_register', array('class' => 'form-horizontal group-border-dashed')); ?>
                    <?php echo validation_errors(); ?>
                    <div class="step-pane active" id="step1">

                        <!--HEADING 1-->
                        <div class="form-group no-padding">
                            <div class="col-sm-7">
                                <h3 class="hthin">Login Info</h3>
                            </div>
                        </div>

                        <!--USERNAME-->
                        <div class="form-group">
                            <label class="col-sm-3 control-label required">User Name</label>
                            <div class="col-sm-6">
                                <input name="username" value="<?= set_value('username'); ?>" type="text" class="form-control" placeholder="User name">
                                <?= form_error('username'); ?>
                            </div>
                        </div>

                        <!--NICK NAME-->
                        <div class="form-group">
                            <label class="col-sm-3 control-label required">Nick Name</label>
                            <div class="col-sm-6">
                                <input name="nickname" value="<?= set_value('nickname'); ?>" type="text" class="form-control" placeholder="Nick name">
                                <?= form_error('nickname'); ?>
                            </div>
                        </div>

                        <!--EMAIL-->
                        <div class="form-group">
                            <label class="col-sm-3 control-label required">E-Mail</label>
                            <div class="col-sm-6">
                                <input name="email" value="<?= set_value('email'); ?>" type="text" class="form-control" placeholder="E-Mail">
                                <?= form_error('email'); ?>
                            </div>
                        </div>

                        <!--PASSWORD-->
                        <div class="form-group">
                            <label class="col-sm-3 control-label required">Password</label>
                            <div class="col-sm-6">
                                <input name="password" value="<?= set_value('password'); ?>" type="password" class="form-control" placeholder="Enter your password">
                                <?= form_error('password'); ?>
                            </div>
                        </div>

                        <!--RETYPE PASSWORD-->
                        <div class="form-group">
                            <label class="col-sm-3 control-label required">Verify Password</label>
                            <div class="col-sm-6">
                                <input name="retype_password" value="<?= set_value('retype_password'); ?>" type="password" class="form-control" placeholder="Enter your password again">
                                <?= form_error('retype_password'); ?>
                            </div>
                        </div>

                        <!--BONUS CODE-->
                        <div class="form-group">
                            <label class="col-sm-3 control-label">Bonus Code</label>
                            <div class="col-sm-6">
                                <input name="bonus_code" value="<?= set_value('bonus_code'); ?>" type="text" class="form-control" placeholder="Enter bonus code you received from facebook here">
                                <?= form_error('bonus_code'); ?>
                            </div>
                        </div>

                        <!--BUTTON GROUP 1-->
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <?= anchor('home/index', 'Cancel', array('class' => 'btn btn-default', 'style' => 'text-decoration: none;')) ?>
                                <button data-wizard="#wizard1" class="btn btn-primary wizard-next">Next Step <i class="fa fa-caret-right"></i></button>
                            </div>
                        </div>

                    </div>
                    <div class="step-pane" id="step3">

                        <!--HEADING 2-->
                        <div class="form-group no-padding">
                            <div class="col-sm-7">
                                <h3 class="hthin">User Info</h3>
                            </div>
                        </div>

                        <!--AVATAR-->
                        <div class="form-group">
                            <label class="col-sm-3 required">Avatar</label>
                            <div class="col-sm-9">
                                <div style="width: 100px; height: 175px; overflow: auto; border: solid 1px #DDDDDD">
                                    <?php
                                    if (!empty($_POST['avatar'])) {
                                        $ava_img = $_POST['avatar'];
                                    } else {
                                        $ava_img = 0;
                                    }

                                    for ($i = 0; $i < $avatarmax; $i++) {
                                        $a = "display: inline-block; width: 48px; height: 48px; background: " .
                                                "url('" . $avatarurl . "') no-repeat -" . ($i * 48) . "px 0px;";
                                        $s = "<input type='radio' name='avatar' value='" . ($i) . "'";
                                        if ($i == $ava_img)
                                            $s .= " checked";
                                        $s .= ">";
                                        $s .= "<div style=\"" . $a . "\"></div>";
                                        echo $s . "<br><br>\r\n";
                                    }
                                    ?>
                                </div>
                            </div>
                        </div>

                        <!--FIRST NAME & LAST NAME-->
                        <div class="form-group">
                            <label class="col-xs-3 required">Real Name:</label>
                            <div class="col-xs-9">
                                <div class="col-sm-6 col-xs-6">
                                    <div class="input-group">
                                        <span class="input-group-addon"><i class="fa fa-chevron-right"></i></span>
                                        <input name="first_name" value="<?= set_value('first_name'); ?>" type="text" placeholder="Enter first name" class="form-control">
                                    </div>
                                    <?= form_error('first_name'); ?>
                                </div>
                                <div class="col-sm-6 col-xs-6">
                                    <div class="input-group">
                                        <span class="input-group-addon"><i class="fa fa-chevron-right"></i></span>
                                        <input name="last_name" value="<?= set_value('last_name'); ?>" type="text" placeholder="Enter last name" class="form-control">
                                    </div>
                                    <?= form_error('last_name'); ?>
                                </div>
                            </div>
                        </div>

                        <!--GENDER-->
                        <div class="form-group">
                            <label class="col-sm-3 required">Gender</label>
                            <div class="col-sm-9">
                                <label class="radio-inline"> <input type="radio" name="gender" class="icheck" value="Male" checked=""> Male</label>
                                <label class="radio-inline"> <input type="radio" name="gender" class="icheck" value="Female"> Female</label>
                            </div>
                        </div>

                        <!--PHONE & PHONE CODE-->
                        <div class="form-group">
                            <label class="col-xs-3 required">Phone:</label>
                            <div class="col-xs-9">
                                <div class="col-xs-3">
                                    <div class="input-group">
                                        <span class="input-group-addon"><i class="fa fa-plus"></i></span>
                                        <input name="phone_code" value="<?= set_value('phone_code'); ?>" type="text" placeholder="84" class="form-control">
                                    </div>
                                    <?= form_error('phone_code'); ?>
                                </div>
                                <div class="col-xs-9">
                                    <div class="input-group">
                                        <span class="input-group-addon"><i class="fa fa-phone"></i></span>
                                        <input name="phone" value="<?= set_value('phone'); ?>" type="text" placeholder="1111222333" class="form-control">
                                    </div>
                                    <?= form_error('phone'); ?>
                                </div>
                            </div>
                        </div>

                        <!--BUTTON GROUP 2-->
                        <div class="form-group">
                            <div class="col-sm-12">
                                <button data-wizard="#wizard1" class="btn btn-default wizard-previous"><i class="fa fa-caret-left"></i> Previous</button>
                                <button data-wizard="#wizard1" class="btn btn-primary wizard-next">Next Step <i class="fa fa-caret-right"></i></button>
                            </div>
                        </div>

                    </div>
                    <div class="step-pane" id="step2">

                        <!--HEADING 3-->
                        <div class="form-group no-padding">
                            <div class="col-sm-7">
                                <h3 class="hthin">Address</h3>
                            </div>
                        </div>

                        <!--IP-->
                        <div class="form-group">
                            <label class="col-xs-3 required">Your IP:</label>
                            <div class="col-xs-9">
                                <div class="input-group">
                                    <span class="input-group-addon"><i class="fa fa-globe"></i></span>
                                    <input name="ip" type="text" value="<?= $user_ip; ?>" class="form-control" readonly="readonly">
                                </div>
                            </div>
                        </div>

                        <!--COUNTRY-->
                        <div class="form-group">
                            <label class="col-xs-3 required">Your Country:</label>
                            <div class="col-xs-9" style="padding-left: 0;">
                                <div class="col-xs-11">
                                    <div class="input-group">
                                        <span class="input-group-addon"><i class="fa fa-globe"></i></span>
                                        <input name="country" type="text" value="<?= $ip_info['country']; ?>" class="form-control" readonly="readonly">
                                    </div>
                                </div>
                                <div class="col-xs-1">
                                    <img src="http://shorter.in/flag.php">
                                </div>
                            </div>
                        </div>

                        <!--CITY-->
                        <div class="form-group">
                            <label class="col-xs-3 required">Your City:</label>
                            <div class="col-xs-9">
                                <div class="input-group">
                                    <span class="input-group-addon"><i class="fa fa-globe"></i></span>
                                    <input name="city" type="text" value="<?= set_value('city'); ?>" class="form-control">
                                </div>
                                <?= form_error('city'); ?>
                            </div>
                        </div>

                        <!--STATE-->
                        <div class="form-group">
                            <label class="col-xs-3 required">Your State:</label>
                            <div class="col-xs-9">
                                <div class="input-group">
                                    <span class="input-group-addon"><i class="fa fa-globe"></i></span>
                                    <input name="state" type="text" value="<?= set_value('state'); ?>" class="form-control">
                                </div>
                                <?= form_error('state'); ?>
                            </div>
                        </div>

                        <!--STREET ADDRESS-->
                        <div class="form-group">
                            <label class="col-xs-3 required">Street Address:</label>
                            <div class="col-xs-9">
                                <div class="input-group">
                                    <span class="input-group-addon"><i class="fa fa-home"></i></span>
                                    <input name="street_address" value="<?= set_value('street_address'); ?>" type="text" placeholder="Enter street address" class="form-control">
                                </div>
                                <?= form_error('street_address'); ?>
                            </div>
                        </div>

                        <!--ZIP CODE-->
                        <div class="form-group">
                            <label class="col-xs-3 required">Zip Code:</label>
                            <div class="col-xs-9">
                                <div class="input-group">
                                    <span class="input-group-addon"><i class="fa fa-location-arrow"></i></span>
                                    <input name="zip_code" value="<?= set_value('zip_code'); ?>" type="text" placeholder="Enter zip code" class="form-control">
                                </div>
                                <?= form_error('zip_code'); ?>
                            </div>
                        </div>

                        <!--QUESTION-->
                        <div class="form-group">
                            <label class="col-xs-3">How did you hear about us?</label>
                            <div class="col-xs-9">
                                <div class="input-group">
                                    <span class="input-group-addon"><i class="fa fa-question-circle"></i></span>
                                    <textarea name="answer" class="form-control" placeholder="Enter your answer here"><?= set_value('answer'); ?></textarea>
                                </div>
                            </div>
                        </div>

                        <!--CAPTCHA-->
                        <div class="form-group">
                            <label class="col-xs-3 required">Captcha:</label>
                            <div class="col-xs-9">
                                <?= $recaptcha ?>
                                <?= form_error('captcha'); ?>
                            </div>
                        </div>

                        <!--BUTTON GROUP 3-->
                        <div class="form-group">
                            <div class="col-sm-12">
                                <button data-wizard="#wizard1" class="btn btn-default wizard-previous"><i class="fa fa-caret-left"></i> Previous</button>
                                <button class="btn btn-success" type="submit"><i class="fa fa-check"></i> Complete</button>
                            </div>
                        </div>
                    </div>
                    <?= form_close(); ?>
                </div>
            </div>
        </div>
    </div>
</div>